inspector: Add a dark background to the recorder

Add a button to toggle the background in the node
view between dark and light. This helps to discern
the borders of some nodes.

diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css
index 920a7cceea9020398b09a3e27ed2ea1ccd6cf3e7..151cbb92cafb7625c1690bad3a24f3152fe4cf63 100644 (file)
--- a/gtk/inspector/inspector.css
+++ b/gtk/inspector/inspector.css
@@ -51,3 +51,11 @@
 stacksidebar.object-details {
   border-top: 1px solid lightgray;
 }
+
+picture.dark {
+  background: gray;
+}
+
+picture.light {
+  background: white;
+}

diff --git a/gtk/inspector/recorder.c b/gtk/inspector/recorder.c
index 0fefa1609d00a50815d604d27187f388485014b6..b4d333f0e65152f5d1d32c0b063d87c9c128ca00 100644 (file)
--- a/gtk/inspector/recorder.c
+++ b/gtk/inspector/recorder.c
@@ -1021,6 +1021,25 @@ render_node_save (GtkButton            *button,
   gtk_widget_show (dialog);
 }
 
+static void
+toggle_dark_mode (GtkToggleButton *button,
+                  GParamSpec      *pspec,
+                  gpointer         data)
+{
+  GtkWidget *picture = data;
+
+  if (gtk_toggle_button_get_active (button))
+    {
+      gtk_widget_add_css_class (picture, "dark");
+      gtk_widget_remove_css_class (picture, "light");
+    }
+  else
+    {
+      gtk_widget_remove_css_class (picture, "dark");
+      gtk_widget_add_css_class (picture, "light");
+    }
+}
+
 static GtkWidget *
 gtk_inspector_recorder_recordings_list_create_widget (gpointer item,
                                                       gpointer user_data)
@@ -1216,6 +1235,7 @@ gtk_inspector_recorder_class_init (GtkInspectorRecorderClass *klass)
   gtk_widget_class_bind_template_callback (widget_class, recordings_list_row_selected);
   gtk_widget_class_bind_template_callback (widget_class, render_node_save);
   gtk_widget_class_bind_template_callback (widget_class, node_property_activated);
+  gtk_widget_class_bind_template_callback (widget_class, toggle_dark_mode);
 
   gtk_widget_class_set_layout_manager_type (widget_class, GTK_TYPE_BIN_LAYOUT);
 }

diff --git a/gtk/inspector/recorder.ui b/gtk/inspector/recorder.ui
index 48bc98d4048221dc7140d307485a75240c2811e4..d2c932410d08b2e0f397653a0512908b2471fdf8 100644 (file)
--- a/gtk/inspector/recorder.ui
+++ b/gtk/inspector/recorder.ui
@@ -37,6 +37,14 @@
                 <property name="hexpand">1</property>
               </object>
             </child>
+            <child>
+              <object class="GtkToggleButton" id="dark_mode_button">
+                <property name="has-frame">0</property>
+                <property name="icon-name">display-brightness-symbolic</property>
+                <property name="tooltip-text" translatable="yes">Use a dark background</property>
+                <signal name="notify::active" handler="toggle_dark_mode" swapped="0" object="render_node_view"/>
+              </object>
+            </child>
             <child>
               <object class="GtkButton" id="render_node_save_button">
                 <property name="has-frame">0</property>